
<template>
  <el-pagination
    style="margin: 10px auto"
    @size-change="handleSizeChange"
    @current-change="handlePageChange"
    background
    :current-page="data.page"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="data.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.total"
  >
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    data: {
      type: Object,
      default () {
        return {
          page: 1,
          size: 10,
          total: 0
        }
      }
    }
  },
  data () {
    return {}
  },
  created () {},
  methods: {
    handleSizeChange (val) {
      this.data.size = val
      this.$emit('onPagePaging')
    },
    handlePageChange (val) {
      this.data.page = val
      this.$emit('onPagePaging')
    }
  }
}
</script>
